import React from 'react';
import './check.scss';
import {observable, observer} from 'mobx.collection';
import ImageLoadable from "components/plugins/imageLoading/imageLoading";
import {Link} from "react-router-dom";
import {RouterList} from "@/routers/router-list";
import {DictController} from "api/dict";
import {REQUEST_STATE} from "fetchState";
import {notify} from "components/state/toast";
import {inject, Provider} from "mobx-react";

let VideoCategory = observable([]);

(async () => {
    let {DATA, STATUS, CODE, MESSAGE, DETAILS} = await DictController.GetVideoCategoryList();
    if (CODE === REQUEST_STATE.CANCEL) {
        return;
    }
    if (STATUS === 0) {
        VideoCategory.clear();
        VideoCategory.push(...DATA);
    } else {
        notify(DETAILS || MESSAGE);
    }
})();

@inject("list")
@observer
class InjectColumnTVDisplay extends React.Component {
    // @observable VideoCategoryList = this.props.list;

    render() {
        let {
            item = {}
        } = this.props;
        let {
            Id,
            Cover,
            Title,
            Category,
            NeedPay,
            To = RouterList.info.tv(Id),
        } = item;

        let VideoCategoryName = this.props.list?.find(x => x.Id === Category)?.Name;

        return (
            <Link to={To} className={"--column-tv-display"}>
                <div className="-image-group">
                    <ImageLoadable src={Cover} className={"summary-img"}/>
                    <div className="view-state font-size-26">{NeedPay ? "付费观看" : "免费观看"}</div>
                    <div className="play-btn"/>
                </div>
                <div className="-title font-size-28">
                    <span>{Title}</span>
                    <span className="category font-size-18">{VideoCategoryName}</span>
                </div>
            </Link>
        );
    }
}

export default function ColumnTVDisplay(props) {
    return (
        <Provider list={VideoCategory}>
            <InjectColumnTVDisplay {...props} list={VideoCategory}/>
        </Provider>
    );
}